<template>
  <el-container>
    <el-header style="height: 60px;margin: 10px;">
      <div class="search-container">
        <!-- 用 el-row 包裹，通过 el-col 划分列 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="类型：" style="margin-bottom: 0;width: 100%;">
              <el-select placeholder="请选择" clearable v-model="cardForm.type">
                <el-option label="时效" value="时效"></el-option>
                <el-option label="课次" value="课次"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="课程卡名称：" style="margin-bottom: 0;width: 100%;">
              <el-input placeholder="请输入课程卡名称" clearable v-model="cardForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：" style="margin-bottom: 0;width: 100%;">
              <el-select placeholder="请选择" clearable v-model="cardForm.status">
                <el-option label="启用" value="启用"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="button-group" style="display: flex;align-items: center;justify-content: flex-end;">
              <el-button type="primary" style="padding: 10px;margin-right: 10px;" @click="selectCard">查询</el-button>
              <el-button style="padding: 10px;margin-right: 10px;" @click="resetCard">重置</el-button>
              <el-button type="danger" icon="el-icon-plus" style="padding: 10px;text-align: center" @click="beforeAddCard">添加课程卡</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <!-- 主内容区域 -->
    <el-main style="margin-top: 20px">
      <div class="table-container">
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-s-grid"></i>
            <span>课程卡列表</span>
          </div>
          <div>
            <el-tag type="info">共{{ total }}张课程卡</el-tag>
          </div>
        </div>

        <el-table :data="cards" style="width: 100%;margin: 0 auto">
          <el-table-column prop="id" label="ID" sortable></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="name" label="课程卡名称"></el-table-column>
          <el-table-column prop="classTimes" label="课次"></el-table-column>
          <el-table-column prop="price" label="售价"></el-table-column>
          <el-table-column prop="validDays" label="有效期"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作" width="200" style="position: relative">
            <template #default="scope">
              <div class="operation-cell" style="position: absolute;right: 110px;top: 8px;">
                <el-button size="small" type="primary" style="padding: 10px;" @click="beforeEditCard(scope.row.id)">编辑
                </el-button>
                <el-button
                    size="small"
                    :type="scope.row.status === '禁用' ? 'danger' : 'success'"
                    style="padding: 10px;"
                    @click="changeCardStatus(scope.row.id,scope.row.status)"
                >
                  {{ scope.row.status === '禁用' ? '启用' : '禁用' }}
                </el-button>
                <el-button size="small" type="danger" style="padding: 10px;" @click="deleteCard(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
              :current-page="1"
              :page-size="10"
              :total="8"
              layout="prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
    </el-main>
    <!-- 弹框区域  -->
    <el-dialog
        :title="dialogTitle"
        style="width: 400px;padding: 40px;"
        v-model="dialogVisible"
        :before-close="handleClose"
    >
      <el-form label-position="top">
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="课程卡类型" style="width: 350px;">
              <el-radio-group v-model="saveCardForm.type">
                <el-radio label="时效"></el-radio>
                <el-radio label="课次"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="课程卡名称" style="width: 350px;">
              <el-input placeholder="请输入课程卡名称" v-model="saveCardForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="20" style="width: 350px;">
            <el-form-item label="有效期（天）">
              <el-input placeholder="请输入有效期天数" v-model="saveCardForm.validDays">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20" style="width: 350px;">
            <el-form-item label="售价">
              <el-input placeholder="请输入售价" v-model="saveCardForm.price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="课程卡介绍">
              <el-input type="textarea" placeholder="请输入课程卡介绍" v-model="saveCardForm.intro"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="启用状态" style="width: 350px;">
              <el-radio-group v-model="saveCardForm.status">
                <el-switch
                    v-model="saveCardForm.status"
                    size="large"
                    active-text="禁用"
                    inactive-text="启用"
                />
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <template #footer>
        <el-button @click="handleClose" style="width: 80px;">取消</el-button>
        <el-button type="primary" @click="saveCard" style="width: 80px;">保存</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

// 总数
let total;
// 弹窗标题
const dialogTitle = ref('添加课程卡');
// 弹窗显示状态
const dialogVisible = ref(false);
// 查询表单
const cardForm = ref({
  type: '',
  name: '',
  status: ''
});
// 课程卡列表数据
const cards = ref([]);
// 新增/编辑表单
const saveCardForm = ref({
  type: '时效',
  name: '',
  validDays: '',
  price: '',
  intro: '',
  status: '启用'
});

// 重置表单
const resetCard = () => {
  cardForm.value = {};
}

// 查询课程卡
const selectCard = () => {
  // let data = qs.stringify(cardForm.value);
  // axios.get(BASE_URL + '/v1/courseCard/select?' + data)
  //     .then((response) => {
  //       if (response.data.code == 2000) {
  //         cards.value = response.data.data;
  //         total = cards.value.length;
  //       } else {
  //         ElMessage.error(response.data.message);
  //       }
  //     })
}

onMounted(() => {
  selectCard();
})

// 更改状态
const changeCardStatus = (id, status) => {
  axios.post(BASE_URL + '/v1/courseCard/update/' + id + '/' + (status === '启用' ? '禁用' : '启用'))
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('状态更改成功');
          selectCard();
        } else {
          ElMessage.error(response.data.message);
        }
      })
}

// 关闭弹窗
const handleClose = () => {
  if (confirm('您确定要关闭弹窗吗')) {
    saveCardForm.value = {
      type: '时效',
      name: '',
      validDays: '',
      price: '',
      intro: '',
      status: '启用'
    };
    dialogVisible.value = false;
  }
}

// 保存课程卡（新增/编辑）
const saveCard = () => {
  let data = qs.stringify(saveCardForm.value);
  let url = saveCardForm.value.id ? '/v1/courseCard/update' : '/v1/courseCard/save';
  axios.post(BASE_URL + url, data)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('保存成功');
          dialogVisible.value = false;
          saveCardForm.value = {
            type: '时效',
            name: '',
            validDays: '',
            price: '',
            intro: '',
            status: '启用'
          };
          selectCard();
        } else if (response.data.code == 3001) {
          ElMessage.error(response.data.data);
        } else {
          ElMessage.error(response.data.message);
        }
      })
}

// 点击添加课程卡
const beforeAddCard = () => {
  dialogTitle.value = '添加课程卡';
  dialogVisible.value = true;
  // 清空表单，确保是新增状态
  saveCardForm.value = {
    type: '时效',
    name: '',
    validDays: '',
    price: '',
    intro: '',
    status: '启用'
  };
}

// 点击编辑课程卡
const beforeEditCard = (id) => {
  dialogTitle.value = '编辑课程卡';
  dialogVisible.value = true;
  axios.get(BASE_URL + '/v1/courseCard/select?id=' + id)
      .then((response) => {
        if (response.data.code == 2000) {
          saveCardForm.value = response.data.data[0];
        } else {
          ElMessage.error(response.data.message);
        }
      })
}

// 删除课程卡
const deleteCard = (id) => {
  if (confirm('您确定要删除该课程卡吗？')) {
    axios.post(BASE_URL + '/v1/courseCard/delete/' + id)
        .then((response) => {
          if (response.data.code == 2000) {
            ElMessage.success('删除成功');
            selectCard();
          } else {
            ElMessage.error(response.data.message);
          }
        })
  }
}

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
}

body {
  background-color: #f5f7fa;
  color: #333;
  height: 100vh;
  overflow: hidden;
}

.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  background: linear-gradient(135deg, #cfd3d9 0%, #bbc6d2 100%);
  color: white;
  padding: 0 20px;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.search-container {
  width: 100%;
  max-width: 1600px;
  padding: 20px 0;
}

.el-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 15px;
  gap: 15px;
  position: relative;
}

.center-buttons {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
}

.el-main {
  background-color: #f0f2f5;
  padding: 0 !important;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.table-container {
  flex: 1;
  padding: 25px;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  flex: 1;
}

.status-active {
  color: #67C23A;
  font-weight: 500;
}

.status-inactive {
  color: #F56C6C;
  font-weight: 500;
}

.pagination {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
}

.operation-cell {
  display: flex;
  gap: 8px;
}

@media (max-width: 1200px) {
  .el-form-item {
    width: calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  .el-form-item {
    width: 100%;
  }

  .button-group {
    flex-direction: column;
  }

  .center-buttons {
    position: static;
    transform: none;
    order: 1;
    margin-bottom: 10px;
  }

  .button-group > .el-button:last-child {
    order: 2;
    width: 100%;
  }
}
</style>